import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import toVuePage from '@/components/toVuePage'

/*登陆页*/
import loginPage from '@/components/loginPage'
import homePage from '@/components/homePage'

import usersList from '@/components/users/list'
import usersAdd from '@/components/users/add'


Vue.use(Router)


/*一般的后台系统都是左右结构的 左边是导航 右边是内容 因为我们把导航写在了homePage组件里，那么右边内容也应该公共
homePage父组件里，
router-view用于标识对应路由所渲染的位置,在router.js里这样定义
*/
export default new Router({
  mode:'history',
  routes: [
   {
      path: '/login',
      name: 'loginPage',
      component: loginPage
    },
	{
      path: '/toVuePage',
      name: 'toVuePage',
      component: toVuePage
    },
   {
      path: '/',
      name: 'homePage',//登录后，跳转到的主页面
      component: homePage
    },
	{
		path: '/homepage',//authlist里前缀都是homepage
		component: homePage,//父级
		children: [ //子级共享同一个父组件 然后在父组件里相应位置定义<router-view/> 去渲染下面页面对应的内容
		  { path: 'user/list', component: usersList, name: 'usersList'}, 
		  { path: 'user/add', component: usersAdd, name: 'usersAdd'}
		]
	}
  ]
})
